<template>
  <div style="background-color: #f6f9fc;min-height: calc(100vh  - 100px)">
    <!--    头部区域开始-->
    <div style="height: 60px;  display: flex;background-color: #8AC5FE">

      <div v-if="data.user.role==='ADMIN'" @click="goPage('/manager/home')" style="width: 240px; display: flex;align-items: center;padding-left: 20px;cursor: pointer">
        <img style="width: 40px;height: 40px;border-radius: 50%;" src="@/assets/imgs/图书馆.png">
        <span style="font-size: 20px;font-weight: bold;color: #17202A;margin-left: 5px">图书借阅系统</span>
      </div>

      <div v-if="data.user.role==='USER'"  style="width: 240px; display: flex;align-items: center;padding-left: 20px;cursor: pointer">
        <img style="width: 40px;height: 40px;border-radius: 50%;" src="@/assets/imgs/图书馆.png">
        <span style="font-size: 20px;font-weight: bold;color: #17202A;margin-left: 5px">图书借阅系统</span>
      </div>


      <div style="display: flex;width: auto;align-items: center">
        <el-menu router :default-active="router.currentRoute.value.path" class="el-menu-demo" mode="horizontal" style="background-color: transparent;"  :ellipsis="false">
          <el-menu-item index="/front/home">系统首页</el-menu-item>
          <el-menu-item index="/front/categoryBook">图书馆</el-menu-item>
          <el-menu-item index="/front/activity">图书活动</el-menu-item>
          <el-menu-item index="/front/room">阅览室</el-menu-item>
        </el-menu>
      </div>


      <div style="width: fit-content;padding-right: 20px;display: flex;align-items: center;border-bottom: 1px solid #ddd;margin-left: auto">
        <el-dropdown>
          <div style="display: flex;align-items: center">
            <img v-if="data.user.avatar" style="width: 40px;height: 40px;border-radius: 50%" :src="data.user.avatar">
            <img v-else style="width: 40px;height: 40px;border-radius: 50%" src="F:\java\project\element-admin-web2025\code\files\default.jpg">
            <span style="margin-left: 5px">{{data.user?.name}}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="router.push('/front/myRecord')">我的借书</el-dropdown-item>
              <el-dropdown-item @click="router.push('/front/mySeat')">我的选座</el-dropdown-item>
              <el-dropdown-item @click="router.push('/front/person')">个人信息</el-dropdown-item>
              <el-dropdown-item @click="router.push('/front/updatePassword')">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

    </div>




    <!--    数据渲染区域开始-->
    <div>
      <RouterView @updateUser="updateUser"/>
    </div>



  </div>
</template>

<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";


const data=reactive({
  user:JSON.parse(localStorage.getItem('code_user')||"{}"),
  introductionData:[],
})

const loadIntroduction=()=>{
  request.get('introduction/selectAll').then(res=>{
    if (res.code==='200'){
      data.introductionData=res.data
    }else {
      ElMessage.error(res.msg)
    }
  })
}
loadIntroduction()

const logout=()=>{
  localStorage.removeItem("code_user")
  location.href='/login'
}

const updateUser=()=>{
  data.user=JSON.parse(localStorage.getItem("code_user")||'{}')
}

const goPage=(path)=>{
  location.href=path
}

</script>

<style scoped>

</style>
